<template>
  <div class="box">
      <div class="box-txt"> 
          <div class="commod">
          <div class="com-left">
              {{qian.goodsName}}
          </div>
          <div class="com-right">
              <span class="iconfont icon-xin"></span><br>
              <span class="dingzhi">加入定制</span>
          </div>
      </div>
      <div class="temper">
          <del class="tem-sp1">温度</del>
          <span class="per-ser tem-span" id="tem-sp2" @click="fn1(0)">冰</span>
          <span class="per-ser" id="tem-sp3" @click="fn1(1)">热</span>
      </div>
      <div class="tangdu">
          <del class="tang-sp1">糖度</del>
          <span class="tang-spe tang-ster" id="tang-sp2" @click="fn2(0)">不另外加糖</span>
          <span class="tang-spe" id="tang-sp3" @click="fn2(1)">半塘</span>
          <span class="tang-spe " id="tang-sp4" @click="fn2(2)">标准糖</span>
      </div>
      </div>
      <div class="box-imgs">
          <img src="../assets/10.jpg">
      </div>
  </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";
export default {
    name:'Option',
    data(){
        return {
            qian:{},
            wen:['冰','热'],
            tang:['不另外加糖','半塘','标准糖']
        }
    },
    methods:{
        fn1(index){
            this.bus.$emit("eclick",this.wen[index])
        },
        fn2(index){
            this.bus.$emit('tclick',this.tang[index])
        }
    },
    mounted(){
        axios({
            url:"/api/goods/findGoodsByGid",
            params:{
                id:this.$route.params.xiaoid
            }
        })
        .then(res=>{
            this.qian = res.data.data
        });
        $('.per-ser').on('click',function(){
            $(this).addClass('tem-span').siblings('span').removeClass()
        })
        $('.tang-spe').on('click',function(){
            $(this).addClass('tang-ster').siblings('span').removeClass()
        })
    },

}
</script>

<style scoped>
.box-txt{
    width: 3.4rem;
    height: 1.94rem;
    background-color: #fff;
    border-radius: 0.04rem;
    margin: auto;
}
.box-txt .commod{
    width: 100%;
    height: 0.6rem;
}
.commod .com-left{
    float: left;
    margin-left: 0.12rem;
    margin-top: 0.22rem;
    font-size: 0.2rem;
}
.commod .com-right{
    width: 0.44rem;
    height: 0.3rem;
    float: right;
    margin-top: 0.14rem;
    margin-right: 0.16rem;
    font-size: 0.1rem;
    text-align: center;
}
.com-right .icon-xin{
    font-size: 0.17rem;
}
.box-txt .temper{
    width: 2.5rem;
    height: 0.3rem;
    margin-top: 0.14rem;
    font-size: 0.14rem;
}
.temper .tem-sp1{
    display: block;
    width: 0.5rem;
    float: left;
    text-align: center;
    line-height: 0.3rem;
    font-size: 0.12rem;
}
.temper #tem-sp2,.temper #tem-sp3{
    display: block;
    float: left;
    width: 0.78rem;
    height: 0.3rem;
    margin-left: 0.12rem;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 0.3rem;
    border-radius: 0.15rem;
}
.temper .tem-span{
    background-color: #f5f8ff;
    color: #5774bb;
    border: 1px solid #a7b6dc;
}
.box-txt .tangdu{
    width: 2.5rem;
    height: 0.3rem;
    margin-top: 0.14rem;
    font-size: 0.14rem;
}
.tangdu .tang-sp1{
    display: block;
    width: 0.5rem;
    float: left;
    text-align: center;
    line-height: 0.3rem;
    font-size: 0.12rem;
}
.tangdu #tang-sp2,.tangdu #tang-sp3,.tangdu #tang-sp4{
    display: block;
    float: left;
    width: 0.78rem;
    height: 0.3rem;
    margin-left: 0.12rem;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 0.3rem;
    border-radius: 0.15rem;
}
.tangdu #tang-sp4{
    margin: 0.12rem 0 0 0.64rem;
}
.tangdu .tang-ster{
    background-color: #f5f8ff;
    color: #5774bb;
    border: 1px solid #a7b6dc;
}
.box .box-imgs{
    margin: 0.12rem auto 0;
    width: 3.4rem;
    height: 4.36rem;
}
.box-imgs img{
    width: 100%;
    height: 100%;
}
</style>